<template>
  <div class="com-type-list">
    <w-nav-bar
      v-if="navTitle"
      :title="navTitle"/>
    <group :title="groupTitle">
      <cell-box
        v-for="(v) in types"
        :key="`study-${v}`"
        is-link
        :link="`${clickLink}${v}`">
        {{ v }}
      </cell-box>
    </group>
  </div>
</template>

<script>
  import { CellBox, Group } from 'vux'
  export default {
    name: "ComTypeList",
    components: {
      CellBox,
      Group
    },
    props: {
      /**
       * 点击行跳转的链接
       */
      clickLink: {
        type: String,
        default: ''
      },
      /**
       * 类对象
       */
      classModel: {
        type: Function,
        default () {
          return () => {}
        }
      },
      /**
       * 导航栏标题
       */
      navTitle: {
        type: String,
        default: ''
      },
      /**
       * 分组标题
       */
      groupTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        /**
         * 学习类型列表
         */
        types: [],
      }
    },
    mounted() {
      this.getStudyTypes()
    },
    methods: {
      /**
       * 获取学习类型列表数据
       */
      getStudyTypes() {
        this.classModel.loadTypes().w_then((dataArr) => {
          this.types = dataArr
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .com-type-list {

  }
</style>
